<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="ONE,GO物,网上购物,交易市场,网上交易">
    <meta name="description" content="ONE-GO物，平价线上交易平台，提供各类商品交易，让大家都可以享受购物的乐趣和真正品质购物">
    <title>ONE - GO物</title>
    <link rel="shortcut icon" href="/static/images/logo_i.png">
    <!--引入layui css样式-->
    <link rel="stylesheet" href="/static/layui-v2.6.7/layui/css/layui.css">
    <!--引入layui js脚本-->
    <script src="/static/layui-v2.6.7/layui/layui.js"></script>
    <script src="/static/js/user.js"></script>
    <link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<!--头部 start-->
<div class="header">
    <div class="layui-header layui-bg-red">
        <div class="layui-container header-content">
            <!--logo start-->
            <a class="layui-logo logo-box" href="/static/index.html">
                <img src="/static/images/logo_w.png" alt="ONE-GO物" class="logo">
                <h2>ONE-GO物</h2>
            </a>
            <!--logo end-->

            <!--search start-->
            <div class="search">
                <div class="search-box">
                    <input type="search" class="search-input" placeholder="请输入你要搜索的宝贝" required autocomplete="off"
                           name="q">
                    <button class="search-btn">搜索</button>
                </div>
                <ul class="search-item"></ul>
            </div>
            <!--search end-->

            <!--用户信息 start-->
            <ul class="layui-nav user-box layui-bg-red" lay-bar="disabled">
                <li class="layui-nav-item">
                    <a href="" class="layui-icon layui-icon-cart">购物车<span class="layui-badge layui-bg-orange">9</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="">全部订单<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item" id="user_info" lay-unselect="">
                    <a href="javascript:;"><img src="/static/images/logo_w.png" class="layui-nav-img"
                                                id="portrait_s"><span
                            id="nickname"></span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/static/page/user/info.html">个人信息</a></dd>
                        <dd><a href="javascript:;">足迹</a></dd>
                        <hr>
                        <dd><a href="javascript:logout();">退出</a></dd>
                    </dl>
                </li>
            </ul>
            <!--用户信息 end-->
        </div>
    </div>
</div>
<!--头部 end-->

<!--主体 start-->
<div class="content">
    <div class="layui-container">
        <div id="column">
            <!--口碑好物 start-->
            <div class="public-praise">
                <div class="layui-row" id="search-merchandise">

                </div>
            </div>
        </div>
    </div>


</div>
<!--主体 end-->

<!--尾部 start-->
<div class="footer">
    <div class="layui-container">
        <p>2021 - 现在 yige@yige.com 版权所有</p>
    </div>
</div>
<!--尾部 end-->

<script>
    layui.use(['layer', 'form', 'carousel', 'jquery', 'element'], function () {
        var layer = layui.layer
            , form = layui.form
            , carousel = layui.carousel
            , $ = layui.$
            , element = layui.element;

        $.ajax({
            type: "GET",
            url: "/user/info/",
            headers: {
                'Authorization': localStorage.getItem('Authorization')
            },
            success: function (data) {
                let code = data.code
                if (code != 200) {
                    $('#user_info').html('<a href="/static/page/user/login.html">前往登陆</a>')
                } else {
                    let user = data.data
                    let nickname = data.data.email
                    if (user.detail) {
                        let detail = user.detail
                        if (detail.nickname) {
                            nickname = detail.nickname
                        }
                        if (detail.portrait) {
                            layui.$('#portrait_s').attr('src', detail.portrait);
                        }
                    }
                    $('#nickname').html(nickname)
                }
            }
        });
        if (!GetQueryString('id')) {
            location.href = '/static/index.html'
        }
        // 获取商品数据
        $.get('/merchandise/by_category', {id: GetQueryString('id')}, function (data) {
            // console.log(data)
            let merchandise_list = data.data
            let content = ``
            $.each(merchandise_list, function (i, merchandise) {
                let title = merchandise.title
                content += `<div class="layui-col-xs3">
                        <a href="/static/page/merchandise/item.html/?id=` + merchandise.id + `" class="layui-card">
                            <div class="layui-card-header">
                                <img src="${merchandise.cover_img}"
                                     alt="宝贝">
                            </div>
                            <div class="layui-card-body">
                                <h4>${title}</h4>
                                <p>${merchandise.subtitle}</p>
                            </div>
                        </a>
                    </div>`
            })
            $('#search-merchandise').html(content)
        })

        // 搜索联想词
        $('.search-input').keyup(function () {
            if ($('.search-input').val()) {
                $.get("/merchandise/category/search/", {'q': $('.search-input').val()}, function (data) {
                    let category_list = data.data
                    if (category_list) {
                        let str = ``
                        $.each(category_list, function (i, category) {
                            str += `<li><a href="/static/page/merchandise/search.html?q=${category._source.name}" target="_blank">${category.highlight.name[0]}</a></li>`
                        })
                        $('.search-item').html(str)
                    }
                })
            } else {
                $('.search-item').html('')
            }
        })

        function search() {
            window.open(`/static/page/merchandise/search.html?q=${$('.search-input').val()}`, '_blank')
        }

        // 点击搜索
        $('.search-btn').click(search)

        // 回车搜索
        $('.search-input').keydown(function (event) {
            if (event.keyCode == 13) {
                search()
            }
        })
    });
</script>
</body>
</html>